@@include('header.htm', {
  "title": "Popover & Tooltip - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "components",
	"active": "popover-tooltip"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Popover & Tooltip</h1>
	
	@@include('breadcrumb.htm', {
		"parent": "components",
		"sub_parent": "components",
		"active": "popover-tooltip"
	})
</div>

<div class="row">
	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Popover Basic</h2>
			</div>

			<div class="card-body">
				<p class="pb-5"> Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/components/popovers/#example"
						target="_blank">more details.</a>
				</p>
				<button type="button" class="btn mb-1 btn-primary btn-pill" data-toggle="popover" title="Popover Title" data-content="Lorem ipsum dolor sit amet consectetur elit sed do.">Launch popover</button>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Tooltips Basic</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> Adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/components/tooltips/#example-enable-tooltips-everywhere" target="_blank">more details.</a>
				</p>

				<button type="button" class="btn mb-1 btn-primary btn-pill" data-toggle="tooltip" title="Tooltip Title">Launch Tooltip</button>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Four Directions Popover </h2>
			</div>

			<div class="card-body">
				<p class="pb-5"> Four options are available: top, right, bottom, and left aligned. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/components/popovers/#four-directions" target="_blank">more details.</a>
				</p>

				<button type="button" class="btn mb-1 btn-info btn-pill" data-container="body" data-toggle="popover" data-placement="top"
					data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
					Popover on top
				</button>

				<button type="button" class="btn mb-1 btn-warning btn-pill" data-container="body" data-toggle="popover" data-placement="right"
					data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
					Popover on right
				</button>

				<button type="button" class="btn mb-1 btn-danger btn-pill" data-container="body" data-toggle="popover" data-placement="bottom"
					data-content="Vivamus
					sagittis lacus vel augue laoreet rutrum faucibus.">
					Popover on bottom
				</button>

				<button type="button" class="btn mb-1 btn-dark btn-pill" data-container="body" data-toggle="popover" data-placement="left"
					data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
					Popover on left
				</button>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2> Four Directions Tooltip</h2>
			</div>

			<div class="card-body">
				<p class="pb-5"> Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/components/tooltips/#examples"
						target="_blank">more details.</a>
				</p>

				<button type="button" class="btn mb-1 btn-pill btn-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
					Tooltip on top
				</button>

				<button type="button" class="btn mb-1 btn-pill btn-danger" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
					Tooltip on bottom
				</button>

				<button type="button" class="btn mb-1 btn-pill btn-warning" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
					Tooltip on right
				</button>

				<button type="button" class="btn mb-1 btn-pill btn-dark" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
					Tooltip on left
				</button>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Dismiss on Next Click Popover</h2>
			</div>

			<div class="card-body">
				<p class="pb-5"> Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/components/popovers/#dismiss-on-next-click" target="_blank">more details.</a>
				</p>

				<button type="button" class="btn mb-1 btn-lg btn-success btn-pill" data-toggle="popover" data-trigger="focus" title="Popover Title"
					data-content="Lorem ipsum dolor sit amet consectetur elit sed do.">Launch popover</button>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Disabled elements</h2>
			</div>

			<div class="card-body">
				<p class="pb-5"> Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click
					them to trigger a tooltip. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.6/components/tooltips/#disabled-elements" target="_blank">more details.</a>
				</p>
				
				<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
					<button class="btn mb-1 btn-success btn-lg btn-pill" style="pointer-events: none;" type="button" disabled>Disabled button</button>
				</span>
			</div>
		</div>
	</div>
</div>



	
@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
